﻿<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap响应式侧边栏导航菜单代码</title>

<link rel="stylesheet" href="css/bootstrap.min.css">


<link href="css/offcanvas.min.css" rel="stylesheet" type="text/css">
</head>


<body>

<div class="overlay"></div>

<nav class="navbar navbar-inverse navbar-static-top">
  <div class="container">
	<div class="navbar-header">
	  <button type="button" class="navbar-toggle collapsed pull-left" data-toggle="offcanvas">
		<span class="sr-only">Toggle navigation</span>
		<span class="icon-bar"></span>
		<span class="icon-bar"></span>
		<span class="icon-bar"></span>
	  </button>
	  <a class="navbar-brand" href="#">Bootstrap响应式导航菜单</a>
	</div>
	<div id="navbar" class="collapse navbar-collapse sidebar-offcanvas">
	  <ul class="nav navbar-nav">
		<li class="active"><a href="#">首页</a></li>
		<li><a href="#about">项目</a></li>
		<li><a href="#contact">关于我们</a></li>
	  </ul>
	</div><!--/.nav-collapse -->
  </div>
</nav>
<!-- /.container -->

<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/offcanvas.js"></script>


</body>
</html>